<template>
  
  <div class="person">
    <h2>{{ a }}</h2>
    <h2>姓名: {{ name }}</h2> // 自动帮忙 .value
    <h2>年龄: {{ age}}</h2>
    <button @click="showSex">查看性别</button>
    <button @click="changeName()">修改名字</button>
    <button @click="changeAge()">修改年龄</button>
    <hr>

    <h2>一辆 {{ car.brand }}车 价值: {{ car.price }}</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br>

    <h2>游戏列表: </h2>
    <ul>
      <li v-for="g in games" :key="g.id">
          游戏的名字: {{ g.name }}
      </li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的名字</button>
  </div>
</template>

// 这个name 也就是在浏览器里面的标签的名字
<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, reactive} from 'vue'

// ---------------------基础类型的响应式数据--------------------------------
// 注意js里面写 ref 改数据 必须要带 .value
let a = ref(666) // 变为响应式的数据
let name = ref('FindYou')
let age = ref(21)
let sex = '男'

function showSex() {
  alert('性别: ' + sex)
}

function changeName() {
  name.value = '看看你的'
}

function changeAge() {
  age.value += 1
}

// ----------------------对象类型的响应式数据------------------------------

//数据
let car = ref({
  brand: '奔驰',
  price: 100
})

let games = ref([ // 变为响应式的数据
{id: '01', name: '王者荣耀'},
{id: '02', name: '原神'},
{id: '03', name: '启动'},
])

function changePrice() {
  car.value.price += 10
}

function changeFirstGame() {
  games.value[0].name = '这个是修改后的游戏的名字'
}
</script>



<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>